import { globalStyle, style } from '@vanilla-extract/css';
import { knnoTable } from '../../theme/table.css';
import { vars } from '../../theme/vars.css';

export const inputGridStyle = style({
	position: 'relative',
	counterReset: 'serial-number',
});

export const ANI_TIME = '0.2';

globalStyle(`${inputGridStyle} tr.reorderable`, {
	position: 'relative',
	transition: `translate ${ANI_TIME}s ease`,
});

globalStyle(`${inputGridStyle} tr.reorderable.dragging`, {
	transition: 'none',
	zIndex: 100000,
	boxShadow: `0 0 3px 3px ${vars.color.shadow}`,
});

globalStyle(`${inputGridStyle} tr.line`, {
	counterIncrement: 'serial-number',
});

globalStyle(`${inputGridStyle} tr.line>td.serial:before`, {
	content: 'counter(serial-number)',
});

globalStyle(`${knnoTable}.${inputGridStyle} tr.reorderable:focus-within`, {});
